<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { shopApigetSkuInfo } from "@/api/shopApi/index";

const popup_product = ref();
const props = defineProps(["id"]);

interface IproductDataArr {
  name: string;
  value: string;
}

const productDataArr = ref<IproductDataArr[]>([]);

const init = async () => {
  const { data } = await shopApigetSkuInfo({ uuid: props?.id });
  console.log(data);

  if (data.error_code === 0) {
    productDataArr.value = data?.data?.propertys;
  }
};

onMounted(() => {
  init();
});

const open = () => {
  popup_product && popup_product.value.open();
};
</script>

<template>
  <div class="app-container">
    <uv-cell
      :border="false"
      @click="open"
      icon="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Group2126.png"
      :isLink="true"
      title="产品参数"
    ></uv-cell>
    <uv-popup
      closeable
      ref="popup_product"
      mode="bottom"
      custom-style=""
      round="20px"
    >
      <view class="content">
        <view class="title font16333">产品参数</view>
        <view v-for="(item, index) in productDataArr" :key="index">
          <view class="item">
            <view class="item-title font14999">{{ item.name }}</view>
            <view class="item-content font14333">{{ item.value }}</view>
          </view>
        </view>
      </view>
    </uv-popup>
  </div>
</template>

<style lang="scss" scoped>
:deep(.uv-cell__title-text) {
  font-size: 24rpx;
}

:deep(.uv-cell__body) {
  padding: 10px 4%;
}

.content {
  padding: 20px 4%;

  .title {
    padding-bottom: 20px;
  }

  .item {
    display: flex;
    padding-bottom: 20px;
  }

  .item-title {
    min-width: 22%;
  }

  .item-content {
    word-wrap: break-word;
    word-break: break-all;
  }
}
</style>
